<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<title>Insert title here</title>
<script>
function draw()
{
	canvas=document.getElementById("canvas");
	var context=canvas.getContext("2d");
	context.fillStyle="#EEEEFF";
	context.fillRect(0,0,400,300);
	context.fillStyle="red";
	context.strokeStyle="blue";
	context.lineWidth="1";
	//context.fillRect(50,50,100,100);
	//context.strokeRect(50,50,100,100);
	var n=0;
	var dx=150;
	var dy=150;
	var s=100;
	context.beginPath();
	context.fillStyle="rgb(100,255,100)";
	context.strokeStyle="rgb(0,0,100)";
	var x=Math.sin(0);
	var y=Math.cos(0);
	var dig=Math.PI/15*11;
	for(var i=0;i<30;i++)
		{
		var x=Math.sin(i*dig);
		var y=Math.cos(y*dig);
		context.lineTo(dx+x*s,dy+y*s);
		}
	context.closePath();
	context.fill();
	context.stroke();
	}
if(typeof FileReader=='undefined')
	{
	alert("您的浏览器未实现filereader接口")
	}
	function readAsDataURL()
	{
		var file=document.getElementById("file").files[0];
		if(!/image\/\w+/.test(file.type))
		{
			alert("请确保文件类型 为图像类型");
			return false;
		}
		var reader=new FileReader();
		reader.readAsDataURL(file);
		reader.onload=function(e)
		{
			var result=document.getElementById("result");
			result.innerHTML="<img src='"+this.result+"' alt=''/>";			
		}
		}
</script>
</head>
<body onload="draw()">
<canvas id='canvas'  width="400" height="300"></canvas>
<br>
<input type="file" id="file" onchange="readAsDataURL()">
<input type="button" value="读取图像" onclick="readAsDataURL()"/>
<div id="result"></div>
</body>

</html>